/**
 * 首先需要了解一个知识点：
 *    默认情况下，父组件 Render ，子组件一定会跟着 Render, 其实最根本的原因是子组件的 Props 发生了变化
 *
 * React中有一个性能优化点，就是要去减少没必要的 ReRender【】
 *
 *    1. 什么是没有必要的 ReRender
 *      当 state 与 props 没有变化的时候，就没有必要去 ReRender
 *
 *    2. 使用 PureComponent 做优化
 */

import React from "react";

interface AppProps {}
interface AppState {
  count: number;
  sonName: string;
  sonAge: number;
}

interface HelloProps {
  name: string;
  age: number;
}

class Hello extends React.PureComponent<HelloProps> {
  render() {
    console.log("Hello Render", this.props);
    return (
      <div>
        <h4>Hello</h4>
        <p>Name: {this.props.name}</p>
        <p>Age: {this.props.age}</p>
      </div>
    );
  }
}

class App extends React.PureComponent<AppProps, AppState> {
  state: Readonly<AppState> = {
    count: 1,

    sonName: "张三",
    sonAge: 18,
  };

  handleClick = () => {
    this.setState((state) => ({ count: state.count + 1 }));
  };

  handleChangeName = () => {
    this.setState((state) => ({
      sonName: state.sonName === "张三~~~" ? "张三~~~" : state.sonName + "~",
    }));
  };

  handleChangeAge = () => {
    this.setState((state) => ({ sonAge: state.sonAge + 1 }));
  };

  render() {
    console.log("App Render");
    return (
      <div>
        <h1>App</h1>
        <button onClick={this.handleClick}>点我, {this.state.count}</button>
        <button onClick={this.handleChangeName}>{this.state.sonName}</button>
        <button onClick={this.handleChangeAge}>{this.state.sonAge}</button>

        <hr />
        <Hello name={this.state.sonName} age={this.state.sonAge} />
      </div>
    );
  }
}

export default App;
